

import React, { useEffect ,useState} from 'react'
import { Layout, Form, Input, Button, Checkbox, message } from 'antd';
import { Header, Content } from 'antd/lib/layout/layout';
import { reg } from '../../uilts/validate.js';
import { ajax } from './../../api/index.js';
import { Route ,useRoutes,useNavigate } from "react-router-dom";



const Register = () => {

    useEffect(() => {
        
    })
    const navigate = useNavigate();
    const registerS = async (values: any) => {
        const res = await ajax.register(values)
        if (res.code == 200) {
          localStorage.setItem("DeskUser",values.phone)
          navigate(`/login?phone=${res.result[0].phone}`)
        //   navigate(-1)  返回上一页
        }
    }

    const onFinish = (values: any) => { //填写完成后
        values = {
            role: "4",
            code: "正常",
            avatar: "https://img2.baidu.com/it/u=589425264,2114516623&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
            name: values.name,
            phone: values.phone,
            password: values.password,
            
        }
        registerS(values)
    };

    const onFinishFailed = (errorInfo: any) => {  //未完成正确格式
        console.log('Failed:', errorInfo, 666);
    };
    return (
        <div style={{ height: "100%" }}>
            <Layout >
                <Header className='header'>
                    <div>
                        <a href=''>
                            <img style={{ height: "35px" }} src="http://v.bootstrapmb.com/2020/8/kxifo8639/vendors/images/deskapp-logo.svg" alt="" />
                        </a>
                    </div>
                    <div>
                        <a href='' >注册</a>
                    </div>
                </Header>
            </Layout>

            <Layout style={{ height: "90%", background: "#eff2f4" }}>
                <Content style={{ display: "flex", alignItems: "center" }}>
                    <div className='login-left' >
                        <img style={{ width: "100%" }} src="http://v.bootstrapmb.com/2020/8/kxifo8639/vendors/images/register-page-img.png" alt="" />
                    </div>
                    <div className='login-right'>
                        <div className='login-main'>
                            <p>注册DeskApp</p>

                            <Form
                                name="basic"
                                labelCol={{ span: 0 }}
                                wrapperCol={{ span: 24 }}
                                initialValues={{ remember: true }}
                                onFinish={onFinish}
                                onFinishFailed={onFinishFailed}
                                autoComplete="off"
                                style={{ marginTop: 50 }}
                            >
                                <Form.Item
                                    className='input1'
                                    name="name"
                                    style={{ height: 50, marginTop: 35, borderColor: "#1b00ff" }}
                                    rules={[{ required: true, message: '姓名不能为空' }]}
                                >
                                    <Input style={{ height: 50, borderRadius: 5 }} placeholder="请输入您的姓名" />
                                </Form.Item>
                                <Form.Item
                                    className='input1'
                                    name="phone"
                                    style={{ height: 50, marginTop: 35, borderColor: "#1b00ff" }}
                                    rules={[{ required: true, message: '手机号不能为空' },
                                    { pattern: reg.phone, message: '请输入11位正确手机号' }]}
                                >
                                    <Input style={{ height: 50, borderRadius: 5 }} placeholder="请输入手机号" />
                                </Form.Item>

                                <Form.Item
                                    className='input1'
                                    name="password"
                                    style={{ height: 50, marginTop: 35 }}
                                    rules={[{ required: true, message: '密码不能为空' },
                                    { pattern: reg.pwd, message: '请输入正确6-18密码' }]}
                                >
                                    <Input.Password style={{ height: 50, borderRadius: 5 }} placeholder="请输入您的密码" />
                                </Form.Item>

                                <Form.Item
                                    className='input1'
                                    name="dbPassword"
                                    style={{ height: 50, marginTop: 35 }}
                                    rules={[{ required: true, message: '确认密码不能为空' },
                                    { pattern: reg.pwd, message: '请输入正确6-18密码' }]}
                                >
                                    <Input.Password style={{ height: 50, borderRadius: 5 }} placeholder="请输入确认密码" />
                                </Form.Item>


                                <Form.Item name="remember" valuePropName="checked" style={{ marginTop: 20 }} wrapperCol={{ offset: 1, span: 24 }}>
                                    <Checkbox>同意条款</Checkbox>
                                </Form.Item>

                                <Form.Item wrapperCol={{ offset: 0, span: 24 }}>
                                    <Button type="primary" htmlType="submit" style={{ width: "100%", fontSize: 18, height: 50, borderRadius: "5px", background: "#1b00ff", color: "#fff", border: 'none', }}>
                                        注册创建账户
                                    </Button>
                                </Form.Item>
                            </Form>
                        </div>
                    </div>
                </Content>
            </Layout>

        </div>
    )
}




export default Register